<template>
  <div>
    <div
      style="width: 50%; height: 200px"
      :id="echarts"
      class="echarts"
      ref="echarts"
    ></div>
  </div>
</template>

<script>
// 引入echarts
import * as echarts from "echarts";

export default {
  name: "EchartsComponents",
  props: {
    // 接收父组件传递过来的信息
    option: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {};
  },
  methods: {
    drawChart() {
      const _this = this;
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById(this.echarts));
      // 绘制图表
      myChart.setOption(_this.option);
    }
  },
  computed: {
    echarts() {
      return "echarts" + Math.random() * 100000;
    }
  },
  mounted: function () {
    const _this = this;
    _this.$nextTick(() => {
      _this.drawChart();
    });
  },
  created: () => {}
};
</script>

<style scoped></style>
